/**
 * Created by huotaol on 2017/11/3.
 */
import React from "react";
import {connect} from "react-redux";
import {Card, Col, Row, Select, DatePicker, Form, Button} from "antd";
import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";

class CustomBarChart extends React.Component {
    static propTypes = {
        data: React.PropTypes.array,
        dataKey: React.PropTypes.string,
        dataName: React.PropTypes.string,
    };

    static defaultProps = {
        data: [],
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <div  >
                <ResponsiveContainer width="100%" height={300}>
                    <BarChart
                        data={this.props.data}
                        margin={{top: 5, right: 30, left: 20, bottom: 5}}
                    >
                        <XAxis dataKey="name"/>
                        <YAxis />
                        <CartesianGrid strokeDasharray="3 3"/>
                        <Tooltip />
                        <Legend />
                        <Bar dataKey={this.props.dataKey} fill="#8884d8"  name={this.props.dataName} />
                    </BarChart>
                </ResponsiveContainer>
            </div>
        );
    }
}

export default CustomBarChart;